<template>
  <div>
    <div class="search">
      <Row>
        <Col>
          <Card>
            <Row>
              <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
                <FormItem label="项目部" prop="my_organization_id" >
                  <Select v-model="searchForm.my_organization_id" clearable filterable  @on-change="getOrganizationId">
                    <Option v-for="item in organizationList" :value="item.id" :key="item.id">{{ item.organization_name }}</Option>
                  </Select>
                </FormItem>
                <Form-item style="margin-left:-100px;" class="br">
                  <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                  <Button @click="handleReset">重置</Button>
                  <Button @click="sumByOrganization" type="primary" icon="ios-bookmarks-outline">项目部分类汇总</Button>
                  <Button @click="sumBySupplier" type="success" icon="ios-bookmarks-outline" >供货商分类汇总</Button>
                  <Button @click="sumAllBySupplier" type="warning" icon="ios-bookmarks-outline" >供货商总汇总</Button>
                  <Dropdown @on-click="handleDropdown">
                    <Button>
                      更多操作
                      <Icon type="md-arrow-dropdown" />
                    </Button>
                    <DropdownMenu slot="list">
                      <DropdownItem name="exportData">导出所选数据</DropdownItem>
                      <DropdownItem name="exportAll">导出全部数据</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                  <Button @click="refresh" icon="refresh">刷新</Button>
                </Form-item>
              </Form>
            </Row>
            <Row>
              <Alert show-icon>
                已选择 <span class="select-count">{{selectCount}}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
              </Alert>
            </Row>
            <Row>
              <Table
                border
                :loading="loading"
                :columns="columns"
                :data="data"
                sortable="custom"
                @on-selection-change="showSelect"
                ref="table">
              </Table>
              <Table :columns="exportColumns" :data="exportData" ref="exportTable" style="display:none"></Table>
            </Row>
            <Row type="flex" justify="end" class="page">
              <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,50,100,200]"
                size="small"
                show-total
                show-elevator
                show-sizer
              ></Page>
            </Row>
          </Card>
        </Col>
      </Row>
      <Modal v-model="modalExportAll" title="确认导出" :loading="loadingExport" @on-ok="exportAll">
        <p>您确认要导出全部 {{total}} 条数据？</p>
      </Modal>
      <viewSum :data="form" v-model="viewVisiable" />
    </div>
  </div>
</template>
<script>
import { getAllOrganization, getSupplierContractDetail, getAllSupplierContractDetail, getSumBySupplier, getTotalBySupplier, getTotalByOrganization } from '@/api/contract';
import viewSum from './view';
export default {
  name: 'supplier-sum-list',
  components: {
    viewSum
  },
  data() {
    return {
      loading: false,
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        my_organization_id: 0
      },
      organizationList: [],
      data: [],
      total: 0,
      selectCount: 0,
      columns: [
        {
          type: "selection",
          width: 50,
          align: "center",
          fixed: "left"
        },
        {
          type: "index",
          width: 50,
          align: "center",
          fixed: "left"
        },
        {
          title: '项目部/事业部',
          key: 'organization_name',
          width: 100,
          align: "center"
        },
        {
          title: '工程名称',
          key: 'project_name',
          width: 160
        },
        {
          title: '合同编号',
          key: 'contract_code',
          width: 180
        },
        {
          title: '供货商名称',
          key: 'company',
          width: 200,
        },
        {
          title: '材料编码',
          key: 'code',
          width: 80
        },
        {
          title: '设备材料名称',
          key: 'name',
          width: 150,
        },
        {
          title: '规格型号',
          key: 'stype',
          width: 150
        },
        {
          title: '单价',
          key: 'price',
          width: 80,
          align: "right"
        },
        {
          title: '数量',
          key: 'count',
          width: 60,
          align: "right"
        },
        {
          title: '金额',
          key: 'summer',
          width: 100,
          align: 'right'
        },
      ],
      exportData: [],
      selectList: [],
      exportColumns: [
        {
          title: '项目部/事业部',
          key: 'organization_name',
          width: 100,
          align: "center"
        },
        {
          title: '工程名称',
          key: 'project_name',
          width: 160
        },
        {
          title: '合同编号',
          key: 'contract_code',
          width: 180
        },
        {
          title: '供货商名称',
          key: 'company',
          width: 200,
        },
        {
          title: '材料编码',
          key: 'code',
          width: 80
        },
        {
          title: '设备材料名称',
          key: 'name',
          width: 150,
        },
        {
          title: '规格型号',
          key: 'stype',
          width: 150
        },
        {
          title: '单价',
          key: 'price',
          width: 80,
          align: "right"
        },
        {
          title: '数量',
          key: 'count',
          width: 60,
          align: "right"
        },
        {
          title: '金额',
          key: 'summer',
          width: 100,
          align: 'right'
        },
      ],
      viewVisiable: false,
      modalExportAll: false,
      loadingExport: true,
      form: {},
    }
  },
  methods: {
    getOrganizations() {
      getAllOrganization().then(res => {
        if (res.code === 0) {
          this.organizationList = res.data.rows;
        }
      })
    },
    getOrganizationId(v) {
      this.searchForm.my_organization_id = v == undefined ? 0 : v;
    },
    handleSearch() {
      if (this.searchForm.my_organization_id == 0) {
        this.$Message.info('请选择要查询的项目部');
        return;
      } else {
        this.getContractDetail();
      }
    },
    handleReset() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.searchForm.my_organization_id = 0;
      this.getContractDetail();
    },
    getContractDetail() {
      this.loading = true;
      getSupplierContractDetail(this.searchForm).then(res => {
        this.loading = false;
        console.log(res)
        if (res.code === 0) {
          this.data = res.data.rows;
          this.total = res.data.count;
        }
      })
    },
    refresh() {
      this.getContractDetail();
    },
    init() {
      this.getOrganizations();
      this.getContractDetail();
    },
    sumByOrganization() {
      getTotalByOrganization().then(res => {
        console.log(res)
        if (res.code === 0) {
          this.form = res.data;
          this.viewVisiable = true;
        }
      })
    },
    sumBySupplier() {
      getSumBySupplier().then(res => {
        console.log(res)
        if (res.code === 0) {
          this.form = res.data;
          this.viewVisiable = true;
        }
      })
    },
    sumAllBySupplier() {
      getTotalBySupplier().then(res => {
        console.log(res)
        if (res.code === 0) {
          this.form = res.data;
          this.viewVisiable = true;
        }
      })
    },
    handleDropdown(name) {
      switch(name) {
        case 'exportData':
          if (this.selectCount <= 0) {
            this.$Message.warning("您还未选择要导出的数据");
            return;
          }
          this.$Modal.confirm({
            title: "确认导出",
            content: "您确认要导出所选 " + this.selectCount + " 条数据?",
            onOk: () => {
              this.$refs.exportTable.exportCsv({
                filename: "集团公司采购汇总明细数据"
              });
            }
          })
          break;
        case 'exportAll':
          this.modalExportAll = true;
          break;
      }
    },
    exportAll() {
      getAllSupplierContractDetail(this.searchForm).then(res => {
        this.modalExportAll = false;
        if (res.code === 0) {
          this.exportData = res.data;
          setTimeout(() => {
            this.$refs.exportTable.exportCsv({
              filename: "集团公司采购汇总明细数据"
            });
          }, 1000);
        }
      });
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getContractDetail();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getContractDetail();
    },
  },
  mounted() {
    this.init();
  }
}
</script>
<style lang="less" scoped>
@import "./supplierSumManager.less";
</style>